<template>
  <div class="cart-list">
    <div class="cart-list-content" v-for="item in datas" :key="item.id">
      <div class="cart-box">
        <div class="pic">
          <img :src="item.imgSrc" alt="" />
        </div>
        <div class="cart-name">
          {{ item.title }}
        </div>
        <div class="cart-price">
          <div class="unit">￥{{ item.newPrice }}</div>
          <div class="cart-num">x {{ item.count }}</div>
        </div>
      </div>

      <div class="net">
        <div class="net-a">实付:</div>
        <div class="net-num">￥{{ toNum(item.newPrice * item.count) }}</div>
        <div class="net-b">(免运费)</div>
      </div>
      <div class="subbtn">
        <!-- <button>提交订单</button> -->
        <div id="dialog">
          <van-button class="btn" type="primary" @click="TipDialog"
            >提交订单</van-button
          >
        </div>
      </div>
      <div class="del">
        <button @click="delCart(item.productId)">删除订单</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "All",
  data() {
    return {
      datas: [],
    };
  },
  computed: {},
  methods: {
    // 提示弹出框
    TipDialog() {
      this.$dialog
        .alert({
          // title: "标题呀",
          message: "是否提交该订单",
        })
        .then(() => {
          console.log("点击了确认");
        });
    },
    delCart(id) {
      Reflect.deleteProperty(this.datas, id);
      localStorage.setItem("pdd", JSON.stringify(this.datas));
      this.getData();
    },

    getData() {
      let data = JSON.parse(localStorage.getItem("pdd"));
      this.datas = data;
    },
    toNum(num) {
      let result = parseFloat(num);
      if (isNaN(result)) {
        console.log("参数类型不行，请检查");
        return false;
      }
      result = Math.round(num * 100) / 100;
      let s_x = result.toString();
      return s_x;
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style scoped>
.cart-list {
  width: 100%;
  position: relative;
  overflow: hidden;

  background: #ddd;
}
.cart-list-content {
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
}
.cart-box {
  width: 100%;
  display: flex;
}
.pic {
  width: 90px;
  height: 90px;
  margin-right: 6px;
  background-size: contain;
}
.pic img {
  width: 100%;
  height: 100%;
}
.cart-name {
  position: relative;
  font-size: 15px;
  margin-right: 0.18rem;
  width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 20px;
}
.cart-price {
  text-align: right;
}
.cart-price > div {
  margin-bottom: 10px;
}
.cart-num {
  color: #9c9c9c;
}
.net {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #151516;
}
.net-a {
  font-size: 13px;
  margin-right: 0.04rem;
}
.net-num {
  font-size: 15px;
  margin-right: 0.02rem;
}
.subbtn {
  width: 100%;
  height: 46px;
}
.subbtn button {
  width: 100%;
  height: 40px;
  border: none;
  background: linear-gradient(to right, #ffd01e, #ff8917);
  border-radius: 30px;
  color: #fff;
  font-size: 17px;
}
.del {
  width: 100%;
  height: 46px;
}
.del button {
  width: 100%;
  height: 40px;
  border: none;
  background: linear-gradient(to right, #ff6034, #ee0a24);
  border-radius: 30px;
  color: #fff;
  font-size: 17px;
}
</style>